<template>
	<view class="root">
		<navigator
			v-for="(option, key) in options"
			:key="key"
			:style="{ padding: `60rpx`, borderBottom: `1rpx solid #eee` }"
			hover-class="tap-hover"
			:url="`/pages/client/Details?mode=${key}`"
			class="fd-row ai-center"
		>
			<image
				class="width-60 height-60"
				:src="`/static/img/icon-${key}.png`"
				mode="aspectFit"
			/>
			<text class="ml-24 fs-28 color-333">{{ option.title }}</text>
			<text class="fw-600 fs-32 f1 text-right">{{ option.value }}</text>
		</navigator>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";

	@Component
	export default class Wallet extends Vue {
		// component property

		optionData: AnyObject = {};
		public get options(): AnyObject {
			const { optionData } = this;
			return {
				balance: {
					title: "储值余额",
					value: optionData.money,
				},
				shareRed: {
					title: "分红",
					value: optionData.bouns,
				},
				// reward: {
				// 	title: "赏金",
				// 	value: "0.00",
				// },
			};
		}

		onLoad() {
			this.$request.get("/index/wallet").then(({ data }) => {
				this.optionData = data;
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
</style>